<template>
	<section
		ref="chart"
		:style="{
			height: parseInt(height) + 'px'
		}"
	/>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: 'VEcharts',
	props: {
    options: {
      type: Object,
			required: true
		},
    height: {
      type: [String, Number],
			default: 400
		}
	},
  mounted() {
    this.$watch('options', this.initChart, {immediate: true})
		window.addEventListener('resize', this.resize)
  },
	beforeDestroy() {
    window.removeEventListener('resize', this.resize)
	},
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart)
      this.chart.setOption(this.options)
    },
		resize() {
      this.chart.resize({
				animation: {duration: 500}
			})
		}
  }
}
</script>
